<div x-data="{cursorStyle: 'default', fileWidth: 0, fileHeight: 0, show: false, index: 0, items: [], bindClass: 'absolute', bindStyle: '', aspectRatio: 1, currentUrl: null, windowWidth: 999, windowHeight: 999, currentTop: 0, currentLeft: 0, originWidth: 0, originHeight: 0, ...methods()}"
     x-init="
    window.livewire.on('showPreview', (id, _index, url, width, height) => {
        if(window.innerWidth - document.body.clientWidth) {
            $('body').css({'overflow-y': 'hidden', 'margin-right': window.innerWidth - document.body.clientWidth + 'px'});
        }
        currentUrl = url + '?x-bce-process=style/list';
        show = true;
        index = _index;
        windowWidth: $(window).width();
        windowHeight: $(window).height();
        currentTop = window.currentElementTop
        currentLeft = window.currentElementLeft
        originWidth = window.originWidth
        originHeight = window.originHeight
        bindClass = 'absolute'
        bindStyle = 'width: ' + originWidth + 'px; height:' + originHeight + 'px; left:' + currentLeft + 'px; top:' + currentTop + 'px'
        aspectRatio = width / originWidth
        fileHeight = height
        fileWidth = width
        setInitPicture(url, width, height)
    });
    $watch('show', value => {
        !value ? $('body').css({'overflow-y': 'auto', 'margin-right': 0}) : null
    });
    window.livewire.on('setPreviewData', (files) => {
        items = files
    })
"
>
    <div x-show="show" class="fixed inset-0 select-none" style="display: none">
        <div class="absolute inset-0 bg-black opacity-75"></div>
        <div class="absolute inset-0" style="z-index: 999">
            <div @click="show = !show" class="absolute cursor-pointer inline-flex items-center justify-center w-8 h-8 rounded-full mr-4 mt-4 border-2 border-white" style="top:0; right:0;">
                <i class="fa fa-close text-xl text-white"></i>
            </div>
            <div
                class="flex h-full w-full max-h-screen items-center justify-center cursor-pointer"
                style="max-width: 100vw;"
                @click="
    const screenX = $event.screenX;
    if (screenX <= windowWidth) {
        prev()
    } else {
        next()
    }
"
            >
                <img x-bind:src="currentUrl" :class="bindClass" class="opacity-100 max-h-screen duration-200 transition-all object-contain" style="object-fit:contain; max-width: 100vw;transform-origin: 50% center; 	transition-timing-function: cubic-bezier(0.4, 0, 1, 1);" :style="bindStyle"/>
            </div>
        </div>
    </div>
</div>
<script>
    function methods() {
        return {
            prev() {
                let index = this.index
               if (index > 0) {
                   this.setNewPicture(--index)
                   return
               }
               this.hide()
            },
            next() {
                let index = this.index
                if (index < this.items.length - 1) {
                    this.setNewPicture(++index)
                    return
                }
                this.hide()
            },
            setInitPicture(url, width, height) {
                this.$nextTick(() => {
                    this.bindStyle = `left: 50%; top: 50%; transform: translate(-50%, -50%); width: ${width}px; height:${height}px;`
                    this.loadImage(url)
                })

            },
            setNewPicture(index) {
                this.bindStyle = `left: 50%; top: 50%; transform: translate(-50%, -50%); width: ${this.items[index].width}px; height:${this.items[index].height}px;`
                this.loadImage(this.items[index].file_url)
                this.index = index
            },
            loadImage(url) {
                this.currentUrl = url + '?x-bce-process=style/list';
                const img = new Image()
                img.src = url
                img.onload = () => {
                    this.currentUrl = url
                }
            },
            hide() {
                this.show = false
            }
        }
    }
</script>
